<template>
  <a-spin :spinning="confirmLoading">
    <a-modal :title="title" :width="width" :visible="visible" @ok="submitForm" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
      <a-card hoverable>
        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row>
            <a-col :span="24">
              <a-form-item label="流程实例名称" v-bind="validateInfos.instanceName">
                <a-input placeholder="请输入流程实例名称" v-model:value="formData.instanceName" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="绑定业务表" v-bind="validateInfos.businessTable">
                <a-input placeholder="请输入流程绑定业务表名称" v-model:value="formData.businessTable" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="绑定业务Id" v-bind="validateInfos.businessRecordId">
                <a-input placeholder="请输入流程绑定业务id" v-model:value="formData.businessRecordId" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="绑定表单组件" v-bind="validateInfos.businessComponent">
                <a-input placeholder="请输入流程绑定组件路径" v-model:value="formData.businessComponent" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </a-modal>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick, defineExpose } from 'vue'
  import { useMessage } from '/@/hooks/web/useMessage'
  import { startProcess } from '../ActProcessDef.api'
  import { Form, UploadProps } from 'ant-design-vue'

  const title = ref<string>('')
  const width = ref<number>(800)
  const visible = ref<boolean>(false)
  const disableSubmit = ref<boolean>(false)

  const emit = defineEmits(['register', 'success'])
  const { createMessage } = useMessage()

  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } })
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } })
  const confirmLoading = ref<boolean>(false)

  const formRef = ref()
  const useForm = Form.useForm

  const formData = reactive<Record<string, any>>({
    processKey: '',
    instanceName: '',
    businessTable: '',
    businessRecordId: '',
    businessComponent: '',
  })

  //表单验证
  const validatorRules = {
    instanceName: [{ required: true, message: '请输入流程实例名称!' }],
    businessTable: [{ required: true, message: '请输入绑定业务表名称!' }],
    businessRecordId: [{ required: true, message: '请输入绑定业务id!' }],
    businessComponent: [{ required: true, message: '请输入流程绑定组件路径!' }],
  }

  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules)

  /**
   * 启动流程
   */
  function start(record: Recordable) {
    title.value = '启动流程：' + record.processKey
    visible.value = true
    console.log(record)
    nextTick(() => {
      resetFields()
      //赋值
      Object.assign(formData, { processKey: record.processKey })
    })
  }

  /**
   * 提交数据
   */
  async function submitForm() {
    try {
      // 触发表单验证
      await validate()
      confirmLoading.value = true

      await startProcess(formData)
      emit('success')
      handleCancel()
    } finally {
      confirmLoading.value = false
    }
  }

  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false
    resetFields()
  }

  defineExpose({
    start,
    disableSubmit,
  })
</script>

<style>
  /**隐藏样式-modal确定按钮 */
  .jee-hidden {
    display: none !important;
  }
</style>
